<template>
  <div>
    <el-dialog :title="title" :visible.sync="visible" width="500px" :before-close="handleCancel">
      <el-form ref="handleFormRef" :model="from" label-width="100px" :rules="rules" size="small" v-loading="loading">
        <el-form-item label="选择岗位" prop="positionSn">
          <el-select
            v-model="from.positionSn"
            placeholder="请选择岗位"
            filterable
            @change="handlePositionChange"
            style="width:100%"
          >
            <el-option
              v-for="(item, index) in this.positionList"
              :key="index"
              :label="item.roleName"
              :value="item.roleNo"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="选择维修人" prop="personnelId">
          <el-select
            v-model="from.personnelId"
            placeholder="请选择维修人"
            filterable
            @change="handleRepairChange"
            style="width:100%"
          >
            <el-option
              v-for="(item, index) in this.repairmanList"
              :key="index"
              :label="item.userName"
              :value="item.userNo"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleCancel" size="small">取 消</el-button>
        <el-button type="primary" @click="handleEditEvent('handleFormRef')" size="small">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getAllRoleList, getListByRoleUserList } from '../js/repair'
export default {
  data () {
    return {
      title: '选择报修人',
      visible: false,
      loading: false,
      from: {
        positionSn: '',
        personnelId: ''
      },
      positionList: [],
      positionItem: {},
      repairmanList: [],
      repairItem: {},
      rules: {
        positionSn: [{ required: true, message: '请选择岗位', trigger: 'blur' }],
        personnelId: [{ required: true, message: '请选择维修人', trigger: 'blur' }]
      }
    }
  },
  props: {
    tenantNo: {
      type: String,
      default: ''
    }
  },
  components: {},
  computed: {},
  created () {},
  mounted () {},
  watch: {},
  methods: {
    edit () {
      this.visible = true
      this.loading = true
      this.initData()
    },
    async initData () {
      this.positionList = []
      let res = await getAllRoleList(this.tenantNo, {})
      this.positionList = res.data
      this.loading = false
      this.repairmanList = []
      this.from.positionSn = ''
      this.from.personnelId = ''
    },
    handlePositionChange (id) {
      // console.log(id)
      // let params = {
      //   positionSn: id,
      //   tenantNo: this.tenantNo
      // }
      this.getListByRoleUserList(id)
    },
    async getListByRoleUserList (id) {
      let res = await getListByRoleUserList(id)
      console.log(res)
      this.repairmanList = res.data
    },
    handleRepairChange (id) {
      this.repairItem = this.repairmanList.find(item => {
        return item.userNo === id
      })
      console.log(this.repairItem)
    },
    handleEditEvent (handleFormRef) {
      this.$refs[handleFormRef].validate(valid => {
        if (valid) {
          let { userNo, userName } = this.repairItem
          let repairItem = {
            personnelId: userNo,
            userName: userName
          }
          this.$emit('ok', repairItem)
          this.handleCancel()
        }
      })
    },
    handleCancel () {
      this.visible = false
      this.positionList = []
      this.repairmanList = []
    }
  }
}
</script>

<style scoped lang="scss">
/deep/ .el-dialog__body {
  padding: 20px 30px 10px 30px;
}
</style>
